<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物服务预约系统</title>
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            background-color: #f9f9f9;
        }

        h1 {
            text-align: center;
            color: #333;
            margin: 20px 0;
        }

        .tab-container {
            text-align: center;
            margin-bottom: 20px;
        }

        /* 修改 tab 样式，颜色加深 */
        .tab {
            display: inline-block;
            padding: 10px 20px;
            background-color: #333; /* 深灰色背景 */
            color: #fff; /* 白色文字 */
            text-decoration: none;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
            margin: 0 5px;
            transition: background-color 0.3s;
        }

        /* 修改激活状态的 tab 样式 */
        .tab.active {
            background-color: #555; /* 更深的灰色背景 */
            border: 1px solid #222;
            border-bottom: none;
        }

        .tab-content {
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 0 0 5px 5px;
            margin: 0 20px;
            min-height: 300px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #f0f0f0;
        }

        button {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn {
            background-color: #28a745;
            color: white;
        }

        .add-btn:hover {
            background-color: #218838;
        }

        .edit-btn {
            background-color: #ffc107;
            color: white;
        }

        .edit-btn:hover {
            background-color: #e0a800;
        }

        .delete-btn {
            background-color: #dc3545;
            color: white;
        }

        .delete-btn:hover {
            background-color: #c82333;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            border-radius: 8px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 骨架屏样式 */
        .skeleton {
            background-color: #f2f2f2;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                background-color: #f2f2f2;
            }
            50% {
                background-color: #e0e0e0;
            }
            100% {
                background-color: #f2f2f2;
            }
        }
    </style>
</head>
<body>
    <h1>宠物服务预约系统</h1>
    <div class="tab-container">
        <a class="tab active" onclick="openTab(event, 'Home')">首页</a>
        <a class="tab" onclick="openTab(event, 'PetManagement')">宠物信息管理</a>
        <a class="tab" onclick="openTab(event, 'ServiceManagement')">服务项目管理</a>
        <a class="tab" onclick="openTab(event, 'AppointmentManagement')">预约信息管理</a>
        <a class="tab" onclick="openTab(event, 'CustomerManagement')">客户信息管理</a>
        <a class="tab" onclick="openTab(event, 'Statistics')">数据统计</a>
    </div>
    <div class="tab-content">
        <div id="Home" class="tab-pane">
            <h2>首页</h2>
            <p>欢迎使用宠物服务预约系统，您可以通过中间导航栏选择不同的功能模块进行操作。</p>
        </div>
        <div id="PetManagement" class="tab-pane" style="display: none;">
            <h2>宠物信息管理</h2>
            <input type="text" id="petSearch" placeholder="搜索宠物名称" oninput="searchPets()">
            <button class="add-btn" onclick="openAddPetModal()">添加宠物</button>
            <div class="skeleton" style="height: 20px; width: 100%; margin-bottom: 10px;"></div>
            <table id="petTable">
                <thead>
                    <tr>
                        <th>宠物名称</th>
                        <th>宠物种类</th>
                        <th>宠物年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="ServiceManagement" class="tab-pane" style="display: none;">
            <h2>服务项目管理</h2>
            <input type="text" id="serviceSearch" placeholder="搜索服务项目名称" oninput="searchServices()">
            <button class="add-btn" onclick="openAddServiceModal()">添加服务项目</button>
            <div class="skeleton" style="height: 20px; width: 100%; margin-bottom: 10px;"></div>
            <table id="serviceTable">
                <thead>
                    <tr>
                        <th>服务项目名称</th>
                        <th>服务价格</th>
                        <th>服务时长</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="AppointmentManagement" class="tab-pane" style="display: none;">
            <h2>预约信息管理</h2>
            <input type="text" id="appointmentSearch" placeholder="搜索宠物名称或服务项目" oninput="searchAppointments()">
            <button class="add-btn" onclick="openAddAppointmentModal()">添加预约</button>
            <div class="skeleton" style="height: 20px; width: 100%; margin-bottom: 10px;"></div>
            <table id="appointmentTable">
                <thead>
                    <tr>
                        <th>宠物名称</th>
                        <th>服务项目</th>
                        <th>预约时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="CustomerManagement" class="tab-pane" style="display: none;">
            <h2>客户信息管理</h2>
            <input type="text" id="customerSearch" placeholder="搜索客户姓名" oninput="searchCustomers()">
            <button class="add-btn" onclick="openAddCustomerModal()">添加客户</button>
            <div class="skeleton" style="height: 20px; width: 100%; margin-bottom: 10px;"></div>
            <table id="customerTable">
                <thead>
                    <tr>
                        <th>客户姓名</th>
                        <th>联系方式</th>
                        <th>客户地址</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="Statistics" class="tab-pane" style="display: none;">
            <h2>数据统计</h2>
            <p>宠物总数: <span id="petCount">0</span></p>
            <p>服务项目总数: <span id="serviceCount">0</span></p>
            <p>预约记录总数: <span id="appointmentCount">0</span></p>
            <p>客户总数: <span id="customerCount">0</span></p>
        </div>
    </div>

    <!-- 添加宠物模态框 -->
    <div id="addPetModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddPetModal()">&times;</span>
            <h3>添加/修改宠物</h3>
            <label for="petName">宠物名称:</label>
            <input type="text" id="petName" placeholder="请输入宠物名称">
            <br>
            <label for="petType">宠物种类:</label>
            <input type="text" id="petType" placeholder="请输入宠物种类">
            <br>
            <label for="petAge">宠物年龄:</label>
            <input type="text" id="petAge" placeholder="请输入宠物年龄">
            <br>
            <button onclick="savePet()">保存</button>
        </div>
    </div>

    <!-- 添加服务项目模态框 -->
    <div id="addServiceModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddServiceModal()">&times;</span>
            <h3>添加/修改服务项目</h3>
            <label for="serviceName">服务项目名称:</label>
            <input type="text" id="serviceName" placeholder="请输入服务项目名称">
            <br>
            <label for="servicePrice">服务价格:</label>
            <input type="text" id="servicePrice" placeholder="请输入服务价格">
            <br>
            <label for="serviceDuration">服务时长:</label>
            <input type="text" id="serviceDuration" placeholder="请输入服务时长">
            <br>
            <button onclick="saveService()">保存</button>
        </div>
    </div>

    <!-- 添加预约模态框 -->
    <div id="addAppointmentModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddAppointmentModal()">&times;</span>
            <h3>添加/修改预约</h3>
            <label for="appointmentPet">宠物名称:</label>
            <input type="text" id="appointmentPet" placeholder="请输入宠物名称">
            <br>
            <label for="appointmentService">服务项目:</label>
            <input type="text" id="appointmentService" placeholder="请输入服务项目">
            <br>
            <label for="appointmentTime">预约时间:</label>
            <input type="text" id="appointmentTime" placeholder="请输入预约时间">
            <br>
            <button onclick="saveAppointment()">保存</button>
        </div>
    </div>

    <!-- 添加客户模态框 -->
    <div id="addCustomerModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddCustomerModal()">&times;</span>
            <h3>添加/修改客户</h3>
            <label for="customerName">客户姓名:</label>
            <input type="text" id="customerName" placeholder="请输入客户姓名">
            <br>
            <label for="customerContact">联系方式:</label>
            <input type="text" id="customerContact" placeholder="请输入联系方式">
            <br>
            <label for="customerAddress">客户地址:</label>
            <input type="text" id="customerAddress" placeholder="请输入客户地址">
            <br>
            <button onclick="saveCustomer()">保存</button>
        </div>
    </div>

    <script>
        // 初始化表格
        function initTables() {
            // 宠物信息管理
            let pets = [
                { name: '小白', type: '猫', age: '2岁' },
                { name: '大黄', type: '狗', age: '3岁' },
                { name: '花花', type: '兔子', age: '1岁' },
                { name: '球球', type: '仓鼠', age: '6个月' },
                { name: '咪咪', type: '猫', age: '1岁半' },
                { name: '旺财', type: '狗', age: '4岁' },
                { name: '跳跳', type: '兔子', age: '8个月' },
                { name: '绒绒', type: '仓鼠', age: '3个月' },
                { name: '小黑', type: '猫', age: '2岁半' },
                { name: '可乐', type: '狗', age: '3岁半' }
            ];
            let petTable = document.getElementById('petTable').getElementsByTagName('tbody')[0];
            petTable.innerHTML = '';
            pets.forEach((pet, index) => {
                let row = petTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = pet.name;
                cell2.innerHTML = pet.type;
                cell3.innerHTML = pet.age;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditPetModal(${index})">编辑</button><button class="delete-btn" onclick="deletePet(${index})">删除</button>`;
            });

            // 服务项目管理
            let services = [
                { name: '宠物洗澡', price: '50元', duration: '1小时' },
                { name: '宠物美容', price: '100元', duration: '2小时' },
                { name: '宠物寄养', price: '80元/天', duration: '根据寄养天数' },
                { name: '宠物体检', price: '150元', duration: '1.5小时' },
                { name: '宠物疫苗接种', price: '200元', duration: '0.5小时' },
                { name: '宠物驱虫', price: '80元', duration: '0.5小时' },
                { name: '宠物训练', price: '300元/次', duration: '2小时' },
                { name: '宠物摄影', price: '250元', duration: '1.5小时' },
                { name: '宠物食品销售', price: '根据商品定价', duration: '无' },
                { name: '宠物用品销售', price: '根据商品定价', duration: '无' }
            ];
            let serviceTable = document.getElementById('serviceTable').getElementsByTagName('tbody')[0];
            serviceTable.innerHTML = '';
            services.forEach((service, index) => {
                let row = serviceTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = service.name;
                cell2.innerHTML = service.price;
                cell3.innerHTML = service.duration;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditServiceModal(${index})">编辑</button><button class="delete-btn" onclick="deleteService(${index})">删除</button>`;
            });

            // 预约信息管理
            let appointments = [
                { pet: '小白', service: '宠物洗澡', time: '2025-03-25 10:00' },
                { pet: '大黄', service: '宠物美容', time: '2025-03-26 14:00' },
                { pet: '花花', service: '宠物体检', time: '2025-03-27 09:00' },
                { pet: '球球', service: '宠物驱虫', time: '2025-03-28 15:00' },
                { pet: '咪咪', service: '宠物寄养', time: '2025-03-29 12:00' },
                { pet: '旺财', service: '宠物训练', time: '2025-03-30 16:00' },
                { pet: '跳跳', service: '宠物摄影', time: '2025-03-31 11:00' },
                { pet: '绒绒', service: '宠物食品销售', time: '2025-04-01 13:00' },
                { pet: '小黑', service: '宠物疫苗接种', time: '2025-04-02 10:30' },
                { pet: '可乐', service: '宠物用品销售', time: '2025-04-03 14:30' }
            ];
            let appointmentTable = document.getElementById('appointmentTable').getElementsByTagName('tbody')[0];
            appointmentTable.innerHTML = '';
            appointments.forEach((appointment, index) => {
                let row = appointmentTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = appointment.pet;
                cell2.innerHTML = appointment.service;
                cell3.innerHTML = appointment.time;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditAppointmentModal(${index})">编辑</button><button class="delete-btn" onclick="deleteAppointment(${index})">删除</button>`;
            });

            // 客户信息管理
            let customers = [
                { name: '张三', contact: '13800138000', address: 'XX小区1栋101室' },
                { name: '李四', contact: '13900139000', address: 'YY小区2栋202室' },
                { name: '王五', contact: '13700137000', address: 'ZZ小区3栋303室' },
                { name: '赵六', contact: '13600136000', address: 'AA小区4栋404室' },
                { name: '孙七', contact: '13500135000', address: 'BB小区5栋505室' },
                { name: '周八', contact: '13400134000', address: 'CC小区6栋606室' },
                { name: '吴九', contact: '13300133000', address: 'DD小区7栋707室' },
                { name: '郑十', contact: '13200132000', address: 'EE小区8栋808室' },
                { name: '王十一', contact: '13100131000', address: 'FF小区9栋909室' },
                { name: '李十二', contact: '13000130000', address: 'GG小区10栋1010室' }
            ];
            let customerTable = document.getElementById('customerTable').getElementsByTagName('tbody')[0];
            customerTable.innerHTML = '';
            customers.forEach((customer, index) => {
                let row = customerTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = customer.name;
                cell2.innerHTML = customer.contact;
                cell3.innerHTML = customer.address;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditCustomerModal(${index})">编辑</button><button class="delete-btn" onclick="deleteCustomer(${index})">删除</button>`;
            });

            // 更新统计数据
            document.getElementById('petCount').innerHTML = pets.length;
            document.getElementById('serviceCount').innerHTML = services.length;
            document.getElementById('appointmentCount').innerHTML = appointments.length;
            document.getElementById('customerCount').innerHTML = customers.length;
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tab-pane');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tab');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 宠物信息管理
        let currentPetIndex = null;

        function openAddPetModal() {
            currentPetIndex = null;
            document.getElementById('petName').value = '';
            document.getElementById('petType').value = '';
            document.getElementById('petAge').value = '';
            document.getElementById('addPetModal').style.display = 'block';
        }

        function openEditPetModal(index) {
            currentPetIndex = index;
            let pets = [
                { name: '小白', type: '猫', age: '2岁' },
                { name: '大黄', type: '狗', age: '3岁' },
                { name: '花花', type: '兔子', age: '1岁' },
                { name: '球球', type: '仓鼠', age: '6个月' },
                { name: '咪咪', type: '猫', age: '1岁半' },
                { name: '旺财', type: '狗', age: '4岁' },
                { name: '跳跳', type: '兔子', age: '8个月' },
                { name: '绒绒', type: '仓鼠', age: '3个月' },
                { name: '小黑', type: '猫', age: '2岁半' },
                { name: '可乐', type: '狗', age: '3岁半' }
            ];
            let pet = pets[index];
            document.getElementById('petName').value = pet.name;
            document.getElementById('petType').value = pet.type;
            document.getElementById('petAge').value = pet.age;
            document.getElementById('addPetModal').style.display = 'block';
        }

        function closeAddPetModal() {
            document.getElementById('addPetModal').style.display = 'none';
        }

        function savePet() {
            let pets = [
                { name: '小白', type: '猫', age: '2岁' },
                { name: '大黄', type: '狗', age: '3岁' },
                { name: '花花', type: '兔子', age: '1岁' },
                { name: '球球', type: '仓鼠', age: '6个月' },
                { name: '咪咪', type: '猫', age: '1岁半' },
                { name: '旺财', type: '狗', age: '4岁' },
                { name: '跳跳', type: '兔子', age: '8个月' },
                { name: '绒绒', type: '仓鼠', age: '3个月' },
                { name: '小黑', type: '猫', age: '2岁半' },
                { name: '可乐', type: '狗', age: '3岁半' }
            ];
            let name = document.getElementById('petName').value;
            let type = document.getElementById('petType').value;
            let age = document.getElementById('petAge').value;
            if (name && type && age) {
                if (currentPetIndex!== null) {
                    pets[currentPetIndex] = { name, type, age };
                } else {
                    pets.push({ name, type, age });
                }
                let petTable = document.getElementById('petTable').getElementsByTagName('tbody')[0];
                petTable.innerHTML = '';
                pets.forEach((pet, index) => {
                    let row = petTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = pet.name;
                    cell2.innerHTML = pet.type;
                    cell3.innerHTML = pet.age;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditPetModal(${index})">编辑</button><button class="delete-btn" onclick="deletePet(${index})">删除</button>`;
                });
                closeAddPetModal();
                document.getElementById('petCount').innerHTML = pets.length;
            }
        }

        function deletePet(index) {
            let pets = [
                { name: '小白', type: '猫', age: '2岁' },
                { name: '大黄', type: '狗', age: '3岁' },
                { name: '花花', type: '兔子', age: '1岁' },
                { name: '球球', type: '仓鼠', age: '6个月' },
                { name: '咪咪', type: '猫', age: '1岁半' },
                { name: '旺财', type: '狗', age: '4岁' },
                { name: '跳跳', type: '兔子', age: '8个月' },
                { name: '绒绒', type: '仓鼠', age: '3个月' },
                { name: '小黑', type: '猫', age: '2岁半' },
                { name: '可乐', type: '狗', age: '3岁半' }
            ];
            pets.splice(index, 1);
            let petTable = document.getElementById('petTable').getElementsByTagName('tbody')[0];
            petTable.innerHTML = '';
            pets.forEach((pet, index) => {
                let row = petTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = pet.name;
                cell2.innerHTML = pet.type;
                cell3.innerHTML = pet.age;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditPetModal(${index})">编辑</button><button class="delete-btn" onclick="deletePet(${index})">删除</button>`;
            });
            document.getElementById('petCount').innerHTML = pets.length;
        }

        function searchPets() {
            let input = document.getElementById('petSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('petTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 服务项目管理
        let currentServiceIndex = null;

        function openAddServiceModal() {
            currentServiceIndex = null;
            document.getElementById('serviceName').value = '';
            document.getElementById('servicePrice').value = '';
            document.getElementById('serviceDuration').value = '';
            document.getElementById('addServiceModal').style.display = 'block';
        }

        function openEditServiceModal(index) {
            currentServiceIndex = index;
            let services = [
                { name: '宠物洗澡', price: '50元', duration: '1小时' },
                { name: '宠物美容', price: '100元', duration: '2小时' },
                { name: '宠物寄养', price: '80元/天', duration: '根据寄养天数' },
                { name: '宠物体检', price: '150元', duration: '1.5小时' },
                { name: '宠物疫苗接种', price: '200元', duration: '0.5小时' },
                { name: '宠物驱虫', price: '80元', duration: '0.5小时' },
                { name: '宠物训练', price: '300元/次', duration: '2小时' },
                { name: '宠物摄影', price: '250元', duration: '1.5小时' },
                { name: '宠物食品销售', price: '根据商品定价', duration: '无' },
                { name: '宠物用品销售', price: '根据商品定价', duration: '无' }
            ];
            let service = services[index];
            document.getElementById('serviceName').value = service.name;
            document.getElementById('servicePrice').value = service.price;
            document.getElementById('serviceDuration').value = service.duration;
            document.getElementById('addServiceModal').style.display = 'block';
        }

        function closeAddServiceModal() {
            document.getElementById('addServiceModal').style.display = 'none';
        }

        function saveService() {
            let services = [
                { name: '宠物洗澡', price: '50元', duration: '1小时' },
                { name: '宠物美容', price: '100元', duration: '2小时' },
                { name: '宠物寄养', price: '80元/天', duration: '根据寄养天数' },
                { name: '宠物体检', price: '150元', duration: '1.5小时' },
                { name: '宠物疫苗接种', price: '200元', duration: '0.5小时' },
                { name: '宠物驱虫', price: '80元', duration: '0.5小时' },
                { name: '宠物训练', price: '300元/次', duration: '2小时' },
                { name: '宠物摄影', price: '250元', duration: '1.5小时' },
                { name: '宠物食品销售', price: '根据商品定价', duration: '无' },
                { name: '宠物用品销售', price: '根据商品定价', duration: '无' }
            ];
            let name = document.getElementById('serviceName').value;
            let price = document.getElementById('servicePrice').value;
            let duration = document.getElementById('serviceDuration').value;
            if (name && price && duration) {
                if (currentServiceIndex!== null) {
                    services[currentServiceIndex] = { name, price, duration };
                } else {
                    services.push({ name, price, duration });
                }
                let serviceTable = document.getElementById('serviceTable').getElementsByTagName('tbody')[0];
                serviceTable.innerHTML = '';
                services.forEach((service, index) => {
                    let row = serviceTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = service.name;
                    cell2.innerHTML = service.price;
                    cell3.innerHTML = service.duration;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditServiceModal(${index})">编辑</button><button class="delete-btn" onclick="deleteService(${index})">删除</button>`;
                });
                closeAddServiceModal();
                document.getElementById('serviceCount').innerHTML = services.length;
            }
        }

        function deleteService(index) {
            let services = [
                { name: '宠物洗澡', price: '50元', duration: '1小时' },
                { name: '宠物美容', price: '100元', duration: '2小时' },
                { name: '宠物寄养', price: '80元/天', duration: '根据寄养天数' },
                { name: '宠物体检', price: '150元', duration: '1.5小时' },
                { name: '宠物疫苗接种', price: '200元', duration: '0.5小时' },
                { name: '宠物驱虫', price: '80元', duration: '0.5小时' },
                { name: '宠物训练', price: '300元/次', duration: '2小时' },
                { name: '宠物摄影', price: '250元', duration: '1.5小时' },
                { name: '宠物食品销售', price: '根据商品定价', duration: '无' },
                { name: '宠物用品销售', price: '根据商品定价', duration: '无' }
            ];
            services.splice(index, 1);
            let serviceTable = document.getElementById('serviceTable').getElementsByTagName('tbody')[0];
            serviceTable.innerHTML = '';
            services.forEach((service, index) => {
                let row = serviceTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = service.name;
                cell2.innerHTML = service.price;
                cell3.innerHTML = service.duration;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditServiceModal(${index})">编辑</button><button class="delete-btn" onclick="deleteService(${index})">删除</button>`;
            });
            document.getElementById('serviceCount').innerHTML = services.length;
        }

        function searchServices() {
            let input = document.getElementById('serviceSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('serviceTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 预约信息管理
        let currentAppointmentIndex = null;

        function openAddAppointmentModal() {
            currentAppointmentIndex = null;
            document.getElementById('appointmentPet').value = '';
            document.getElementById('appointmentService').value = '';
            document.getElementById('appointmentTime').value = '';
            document.getElementById('addAppointmentModal').style.display = 'block';
        }

        function openEditAppointmentModal(index) {
            currentAppointmentIndex = index;
            let appointments = [
                { pet: '小白', service: '宠物洗澡', time: '2025-03-25 10:00' },
                { pet: '大黄', service: '宠物美容', time: '2025-03-26 14:00' },
                { pet: '花花', service: '宠物体检', time: '2025-03-27 09:00' },
                { pet: '球球', service: '宠物驱虫', time: '2025-03-28 15:00' },
                { pet: '咪咪', service: '宠物寄养', time: '2025-03-29 12:00' },
                { pet: '旺财', service: '宠物训练', time: '2025-03-30 16:00' },
                { pet: '跳跳', service: '宠物摄影', time: '2025-03-31 11:00' },
                { pet: '绒绒', service: '宠物食品销售', time: '2025-04-01 13:00' },
                { pet: '小黑', service: '宠物疫苗接种', time: '2025-04-02 10:30' },
                { pet: '可乐', service: '宠物用品销售', time: '2025-04-03 14:30' }
            ];
            let appointment = appointments[index];
            document.getElementById('appointmentPet').value = appointment.pet;
            document.getElementById('appointmentService').value = appointment.service;
            document.getElementById('appointmentTime').value = appointment.time;
            document.getElementById('addAppointmentModal').style.display = 'block';
        }

        function closeAddAppointmentModal() {
            document.getElementById('addAppointmentModal').style.display = 'none';
        }

        function saveAppointment() {
            let appointments = [
                { pet: '小白', service: '宠物洗澡', time: '2025-03-25 10:00' },
                { pet: '大黄', service: '宠物美容', time: '2025-03-26 14:00' },
                { pet: '花花', service: '宠物体检', time: '2025-03-27 09:00' },
                { pet: '球球', service: '宠物驱虫', time: '2025-03-28 15:00' },
                { pet: '咪咪', service: '宠物寄养', time: '2025-03-29 12:00' },
                { pet: '旺财', service: '宠物训练', time: '2025-03-30 16:00' },
                { pet: '跳跳', service: '宠物摄影', time: '2025-03-31 11:00' },
                { pet: '绒绒', service: '宠物食品销售', time: '2025-04-01 13:00' },
                { pet: '小黑', service: '宠物疫苗接种', time: '2025-04-02 10:30' },
                { pet: '可乐', service: '宠物用品销售', time: '2025-04-03 14:30' }
            ];
            let pet = document.getElementById('appointmentPet').value;
            let service = document.getElementById('appointmentService').value;
            let time = document.getElementById('appointmentTime').value;
            if (pet && service && time) {
                if (currentAppointmentIndex!== null) {
                    appointments[currentAppointmentIndex] = { pet, service, time };
                } else {
                    appointments.push({ pet, service, time });
                }
                let appointmentTable = document.getElementById('appointmentTable').getElementsByTagName('tbody')[0];
                appointmentTable.innerHTML = '';
                appointments.forEach((appointment, index) => {
                    let row = appointmentTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = appointment.pet;
                    cell2.innerHTML = appointment.service;
                    cell3.innerHTML = appointment.time;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditAppointmentModal(${index})">编辑</button><button class="delete-btn" onclick="deleteAppointment(${index})">删除</button>`;
                });
                closeAddAppointmentModal();
                document.getElementById('appointmentCount').innerHTML = appointments.length;
            }
        }

        function deleteAppointment(index) {
            let appointments = [
                { pet: '小白', service: '宠物洗澡', time: '2025-03-25 10:00' },
                { pet: '大黄', service: '宠物美容', time: '2025-03-26 14:00' },
                { pet: '花花', service: '宠物体检', time: '2025-03-27 09:00' },
                { pet: '球球', service: '宠物驱虫', time: '2025-03-28 15:00' },
                { pet: '咪咪', service: '宠物寄养', time: '2025-03-29 12:00' },
                { pet: '旺财', service: '宠物训练', time: '2025-03-30 16:00' },
                { pet: '跳跳', service: '宠物摄影', time: '2025-03-31 11:00' },
                { pet: '绒绒', service: '宠物食品销售', time: '2025-04-01 13:00' },
                { pet: '小黑', service: '宠物疫苗接种', time: '2025-04-02 10:30' },
                { pet: '可乐', service: '宠物用品销售', time: '2025-04-03 14:30' }
            ];
            appointments.splice(index, 1);
            let appointmentTable = document.getElementById('appointmentTable').getElementsByTagName('tbody')[0];
            appointmentTable.innerHTML = '';
            appointments.forEach((appointment, index) => {
                let row = appointmentTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = appointment.pet;
                cell2.innerHTML = appointment.service;
                cell3.innerHTML = appointment.time;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditAppointmentModal(${index})">编辑</button><button class="delete-btn" onclick="deleteAppointment(${index})">删除</button>`;
            });
            document.getElementById('appointmentCount').innerHTML = appointments.length;
        }

        function searchAppointments() {
            let input = document.getElementById('appointmentSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('appointmentTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td1 = tr[i].getElementsByTagName('td')[0];
                let td2 = tr[i].getElementsByTagName('td')[1];
                if (td1 && td2) {
                    let txtValue1 = td1.textContent || td1.innerText;
                    let txtValue2 = td2.textContent || td2.innerText;
                    if (txtValue1.toUpperCase().indexOf(filter) > -1 || txtValue2.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 客户信息管理
        let currentCustomerIndex = null;

        function openAddCustomerModal() {
            currentCustomerIndex = null;
            document.getElementById('customerName').value = '';
            document.getElementById('customerContact').value = '';
            document.getElementById('customerAddress').value = '';
            document.getElementById('addCustomerModal').style.display = 'block';
        }

        function openEditCustomerModal(index) {
            currentCustomerIndex = index;
            let customers = [
                { name: '张三', contact: '13800138000', address: 'XX小区1栋101室' },
                { name: '李四', contact: '13900139000', address: 'YY小区2栋202室' },
                { name: '王五', contact: '13700137000', address: 'ZZ小区3栋303室' },
                { name: '赵六', contact: '13600136000', address: 'AA小区4栋404室' },
                { name: '孙七', contact: '13500135000', address: 'BB小区5栋505室' },
                { name: '周八', contact: '13400134000', address: 'CC小区6栋606室' },
                { name: '吴九', contact: '13300133000', address: 'DD小区7栋707室' },
                { name: '郑十', contact: '13200132000', address: 'EE小区8栋808室' },
                { name: '王十一', contact: '13100131000', address: 'FF小区9栋909室' },
                { name: '李十二', contact: '13000130000', address: 'GG小区10栋1010室' }
            ];
            let customer = customers[index];
            document.getElementById('customerName').value = customer.name;
            document.getElementById('customerContact').value = customer.contact;
            document.getElementById('customerAddress').value = customer.address;
            document.getElementById('addCustomerModal').style.display = 'block';
        }

        function closeAddCustomerModal() {
            document.getElementById('addCustomerModal').style.display = 'none';
        }

        function saveCustomer() {
            let customers = [
                { name: '张三', contact: '13800138000', address: 'XX小区1栋101室' },
                { name: '李四', contact: '13900139000', address: 'YY小区2栋202室' },
                { name: '王五', contact: '13700137000', address: 'ZZ小区3栋303室' },
                { name: '赵六', contact: '13600136000', address: 'AA小区4栋404室' },
                { name: '孙七', contact: '13500135000', address: 'BB小区5栋505室' },
                { name: '周八', contact: '13400134000', address: 'CC小区6栋606室' },
                { name: '吴九', contact: '13300133000', address: 'DD小区7栋707室' },
                { name: '郑十', contact: '13200132000', address: 'EE小区8栋808室' },
                { name: '王十一', contact: '13100131000', address: 'FF小区9栋909室' },
                { name: '李十二', contact: '13000130000', address: 'GG小区10栋1010室' }
            ];
            let name = document.getElementById('customerName').value;
            let contact = document.getElementById('customerContact').value;
            let address = document.getElementById('customerAddress').value;
            if (name && contact && address) {
                if (currentCustomerIndex!== null) {
                    customers[currentCustomerIndex] = { name, contact, address };
                } else {
                    customers.push({ name, contact, address });
                }
                let customerTable = document.getElementById('customerTable').getElementsByTagName('tbody')[0];
                customerTable.innerHTML = '';
                customers.forEach((customer, index) => {
                    let row = customerTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = customer.name;
                    cell2.innerHTML = customer.contact;
                    cell3.innerHTML = customer.address;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditCustomerModal(${index})">编辑</button><button class="delete-btn" onclick="deleteCustomer(${index})">删除</button>`;
                });
                closeAddCustomerModal();
                document.getElementById('customerCount').innerHTML = customers.length;
            }
        }

        function deleteCustomer(index) {
            let customers = [
                { name: '张三', contact: '13800138000', address: 'XX小区1栋101室' },
                { name: '李四', contact: '13900139000', address: 'YY小区2栋202室' },
                { name: '王五', contact: '13700137000', address: 'ZZ小区3栋303室' },
                { name: '赵六', contact: '13600136000', address: 'AA小区4栋404室' },
                { name: '孙七', contact: '13500135000', address: 'BB小区5栋505室' },
                { name: '周八', contact: '13400134000', address: 'CC小区6栋606室' },
                { name: '吴九', contact: '13300133000', address: 'DD小区7栋707室' },
                { name: '郑十', contact: '13200132000', address: 'EE小区8栋808室' },
                { name: '王十一', contact: '13100131000', address: 'FF小区9栋909室' },
                { name: '李十二', contact: '13000130000', address: 'GG小区10栋1010室' }
            ];
            customers.splice(index, 1);
            let customerTable = document.getElementById('customerTable').getElementsByTagName('tbody')[0];
            customerTable.innerHTML = '';
            customers.forEach((customer, index) => {
                let row = customerTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = customer.name;
                cell2.innerHTML = customer.contact;
                cell3.innerHTML = customer.address;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditCustomerModal(${index})">编辑</button><button class="delete-btn" onclick="deleteCustomer(${index})">删除</button>`;
            });
            document.getElementById('customerCount').innerHTML = customers.length;
        }

        function searchCustomers() {
            let input = document.getElementById('customerSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('customerTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 页面加载完成后初始化表格
        window.onload = initTables;
    </script>
</body>
</html>
